<script setup>
import {useRoute} from "vue-router";
import {reactive} from "vue";
import {axiosAllCars, axiosChangeCollect, axiosGetUserInfo} from "../api";
import {getUserState} from "../storage/storage";
import {ElMessage} from "element-plus";

const storageGroup = reactive({
  userinfo: getUserState() || {loginState: false}
})

const route = useRoute();

const shopInfoGroup = reactive({
  baseUrl: "http://118.178.254.102:1252",
  shopInfo: {
    img: []
  },
  async getInitData() {
    const result = await axiosAllCars();
    result.data.map(item => {
      if (route.query.id == item.id) {
        item.img = item.img.split("_")
        this.shopInfo = item
      }
    })
  },
  async changeCollect(name) {
    if (storageGroup.userinfo.loginState) {
      const result = await axiosGetUserInfo({account: storageGroup.userinfo.account});
      console.log(result)
      if (result.status === 200) {
        let result2 = null;
        if (result.data[0].collect === "" || result.data[0].collect === null) {
          result2 = await axiosChangeCollect({account: storageGroup.userinfo.account, collect: name})
          if (result2.status === 200) {
            if (result2.data === "Normal") {
              ElMessage.success("收藏成功")
            }
          }
        } else {
          if (result.data[0].collect.split("_").indexOf(name) >= 0) {
            ElMessage.warning("收藏失败，收藏夹中已有该商品")
          } else {
            result2 = await axiosChangeCollect({
              account: storageGroup.userinfo.account,
              collect: result.data[0].collect + "_" + name
            })
            if (result2.status === 200) {
              if (result2.data === "Normal") {
                ElMessage.success("收藏成功")
              }
            }
          }
        }
      }
    } else {
      ElMessage.warning("请先登录，再收藏")
    }
  }
})

shopInfoGroup.getInitData()
</script>

<template>
  <div class="page-wrap">
    <div class="container">
      <div class="page-body">
        <div class="left">
          <div class="left-carousel">
            <el-carousel height="400px">
              <el-carousel-item v-for="(item,index) of shopInfoGroup.shopInfo.img" :key="index">
                <img :src=" shopInfoGroup.baseUrl + item" alt="" class="left-carousel-logout"/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="right">
          <div class="right-header">
            <span class="right-header-type">{{ shopInfoGroup.shopInfo.type }}</span>
            <span class="right-header-name">{{ shopInfoGroup.shopInfo.name }}</span>
          </div>
          <div class="right-body">
            <div class="right-body-item">
              <span class="right-body-item-title">发布者：</span>
              <span class="right-body-item-content">{{ shopInfoGroup.shopInfo.account }}</span>
            </div>
            <div class="right-body-item">
              <span class="right-body-item-title">国家：</span>
              <span class="right-body-item-content">{{ shopInfoGroup.shopInfo.country }}</span>
            </div>
            <div class="right-body-item">
              <span class="right-body-item-title">车型：</span>
              <span class="right-body-item-content">{{ shopInfoGroup.shopInfo.level }}</span>
            </div>
            <div class="right-body-item">
              <span class="right-body-item-title">动力：</span>
              <span class="right-body-item-content">{{ shopInfoGroup.shopInfo.power }}</span>
            </div>
            <div class="right-body-item">
              <span class="right-body-item-title">价格：</span>
              <span class="right-body-item-content">{{ shopInfoGroup.shopInfo.price }}</span>
            </div>
            <div class="right-body-item">
              <span class="right-body-item-title">指导价：</span>
              <span class="right-body-item-content">{{ shopInfoGroup.shopInfo.guide }}</span>
            </div>
          </div>
          <div class="right-footer">
            <div class="right-footer-btn">
              <button class="right-footer-btn-logout" @click="shopInfoGroup.changeCollect(shopInfoGroup.shopInfo.name)">
                收藏
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="page-footer">
        <div class="title">
          <span>车辆图片</span>
        </div>
        <div class="info">
          <div v-for="(item,index) of shopInfoGroup.shopInfo.img" :key="index" class="info-item">
            <img :src="shopInfoGroup.baseUrl + item" alt="" class="info-item-logout"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped src="../css/car-item.css">

</style>
